<template>
  <div>
    <el-row :gutter="14">
      <DataCard :card-list="tocardList" />
      <ChartCard :chart-data="saleTrendData" :opt="{reportType:'line'}" :chart-card-name="titleList.lineName" @sendType="sendType" />
      <TableCard :url="saleGoodsRankUrl" :conditions="conditions" :size="size" :stripe="true" :table-card-name="titleList.merchandiseName" :close-seven="closeSeven" />
      <TableCard :url="saleCustomerRankUrl" :conditions="conditions" :size="size" :stripe="true" :table-card-name="titleList.clientmName" :close-seven="closeSeven" />
      <ChartCard :chart-data="saleOrderPriceData" :opt="{reportType:'pie'}" :chart-card-name="titleList.pieName" :close-seven="closeSeven" />
      <ChartCard :chart-data="saleReturnData" :opt="{reportType:'histogram'}" :change-lenged="saleReturnLengeds" :chart-card-name="titleList.histogramName" :close-seven="closeSeven" />
      <TableCard :url="saleStaffRankUrl" :conditions="conditions" :size="size" :stripe="true" :table-card-name="titleList.clerkName" :close-seven="closeSeven" />
      <TableCard :url="saleChurnCustomerUrl" :conditions="conditions" :size="size" :stripe="true" :table-card-name="titleList.runAwayName" />
    </el-row>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import DataCard from '../components/DataCard'
import ChartCard from '../components/ChartCard'
import TableCard from '../components/TableCard'
import url from '@/api/url'

export default {
  components: {
    DataCard,
    ChartCard,
    TableCard,
  },
  data() {
    return {
      closeSeven: true, // 近7天
      saleGoodsRankUrl: url.saleGoodsRank, // 商品销售排行
      saleCustomerRankUrl: url.saleCustomerRank, // 客户销售排行
      saleStaffRankUrl: url.saleStaffRank, // 职员销售排行
      saleChurnCustomerUrl: url.saleChurnCustomer, // 流失客户
    }
  },
  computed: {
    ...mapState('operation', [
      'conditions',
      'size',
      'buyList', // 指标卡数据
      'saleTrendData', // 销售趋势
      'saleOrderPriceData', // 订单单价分析
      'saleReturnData', // 销售退货分析
      'saleReturnLengeds' // 销售退货分析
    ]),
    tocardList(state) { // 销售顶端数据
      const {buyList} = state
      return [
        {text: this.$t('manage.monthSale'), amount: buyList.monthSale},
        {text: this.$t('manage.monthSaleCustomerPrice'), amount: buyList.monthSaleCustomerPrice},
        {text: this.$t('manage.monthSaleCustomers'), amount: buyList.monthSaleCustomers, number: true},
        {text: this.$t('manage.monthSaleOrderPrice'), amount: buyList.monthSaleOrderPrice},
        {text: this.$t('manage.monthSaleOrders'), amount: buyList.monthSaleOrders, number: true},
        {text: this.$t('manage.monthSaleProfit'), amount: buyList.monthSaleProfit},
        {text: this.$t('manage.saleProfitPer'), amount: buyList.saleProfitPer, unit: true},
        {text: this.$t('manage.yesterdaySale'), amount: buyList.yesterdaySale},
      ]
    },
    titleList() {
      return {
        lineName: this.$t('manage.saleTrendData'),
        merchandiseName: this.$t('manage.saleGoodsRank'),
        clientmName: this.$t('manage.saleCustomerRank'),
        pieName: this.$t('manage.saleOrderPriceData'),
        histogramName: this.$t('manage.saleReturnLengeds'),
        clerkName: this.$t('manage.saleStaffRank'),
        runAwayName: this.$t('manage.saleChurnCustomer'),
      }
    }
  },
  mounted() {
    this.$store.dispatch('operation/getSaleIndexCard') // 顶端数据
    this.$store.dispatch('operation/getSaleTrend', {type: 'day'}) // 销售趋势
    this.$store.dispatch('operation/getSaleOrderPrice') // 订单单价分析
    this.$store.dispatch('operation/getSaleReturn') // 销售退货分析
  },
  methods: {
    sendType(type) {
      this.$store.dispatch('operation/getSaleTrend', {type}) // 销售趋势
    },
  }
}
</script>

<style scoped lang="scss">
    @import '../components/style'
</style>
